<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Tanzania Royal Foundation</title>

    <!-- Favicon -->
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🇹🇿</text></svg>" type="image/svg+xml" />

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>

    <style>
        /* ===== RESET & BASE ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style: none;
        }

        img {
            max-width: 100%;
            display: block;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* ===== ANIMATIONS ===== */
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(40px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes slideDown {
            0% {
                opacity: 0;
                transform: translateY(-20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse {
            0%,
            100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

        @keyframes float {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        .animate-on-scroll {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== HEADER ===== */
        header {
            background: #0b1a33;
            padding: 14px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
            transition: all 0.3s ease;
        }

        header .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
        }

        .logo-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        .logo-wrap a {
            display: flex;
            align-items: center;
        }

        .logo-wrap img {
            height: 90px;
            /* 60px + 50% = 90px */
            width: auto;
            transition: all 0.3s ease;
            object-fit: contain;
        }

        .logo-text {
            color: #ffffff;
            font-weight: 800;
            font-size: 1.3rem;
            letter-spacing: 1px;
            display: none;
            /* hidden on small, show on larger if needed */
        }

        /* ===== NAVIGATION ===== */
        nav {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        nav a {
            color: rgba(255, 255, 255, 0.85);
            font-weight: 500;
            font-size: 0.9rem;
            padding: 8px 16px;
            border-radius: 30px;
            transition: all 0.3s ease;
            position: relative;
            letter-spacing: 0.3px;
            white-space: nowrap;
        }

        nav a:hover,
        nav a.active {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.12);
        }

        nav a.active::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background: #facc15;
            border-radius: 10px;
        }

        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 4px;
            background: transparent;
            border: none;
        }

        .hamburger span {
            width: 28px;
            height: 3px;
            background: #fff;
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 6px);
        }
        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }
        .hamburger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -6px);
        }

        /* ===== PAGE SECTIONS ===== */
        .page-section {
            display: none;
            animation: fadeIn 0.5s ease;
            padding: 60px 0;
        }

        .page-section.active {
            display: block;
        }

        /* ===== HERO ===== */
        .hero {
            background: linear-gradient(135deg, #0b1a33 0%, #1a365d 50%, #1e4a7a 100%);
            color: #fff;
            padding: 100px 0 80px;
            position: relative;
            overflow: hidden;
            min-height: 70vh;
            display: flex;
            align-items: center;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 70%;
            height: 200%;
            background: radial-gradient(ellipse, rgba(250, 204, 21, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .hero .container {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

        .hero-content h1 {
            font-size: 3.2rem;
            font-weight: 900;
            line-height: 1.15;
            margin-bottom: 18px;
            letter-spacing: -0.5px;
        }

        .hero-content h1 span {
            color: #facc15;
        }

        .hero-content p {
            font-size: 1.15rem;
            opacity: 0.85;
            max-width: 520px;
            margin-bottom: 30px;
            line-height: 1.8;
        }

        .hero-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 32px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            background: #facc15;
            color: #0b1a33;
            box-shadow: 0 4px 15px rgba(250, 204, 21, 0.35);
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(250, 204, 21, 0.5);
        }

        .btn-outline {
            background: transparent;
            color: #fff;
            border: 2px solid rgba(255, 255, 255, 0.4);
            box-shadow: none;
        }

        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: #fff;
            box-shadow: none;
        }

        .hero-image {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-image img {
            max-width: 100%;
            height: auto;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: float 6s ease-in-out infinite;
            max-height: 400px;
            object-fit: cover;
            width: 100%;
        }

        /* ===== STATS ===== */
        .stats {
            background: #ffffff;
            padding: 60px 0;
            box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.04);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            text-align: center;
        }

        .stats-item {
            padding: 20px;
        }

        .stats-item .number {
            font-size: 3.2rem;
            font-weight: 900;
            color: #0b1a33;
            letter-spacing: -1px;
        }

        .stats-item .number span {
            color: #facc15;
        }

        .stats-item .label {
            font-size: 1rem;
            color: #64748b;
            font-weight: 500;
            margin-top: 4px;
        }

        /* ===== SECTION TITLES ===== */
        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-title h2 {
            font-size: 2.4rem;
            font-weight: 800;
            color: #0b1a33;
            letter-spacing: -0.5px;
        }

        .section-title h2 span {
            color: #facc15;
        }

        .section-title p {
            color: #64748b;
            max-width: 600px;
            margin: 10px auto 0;
            font-size: 1.05rem;
        }

        /* ===== RECENT CAUSES / PROGRAMS ===== */
        .causes {
            background: #f1f5f9;
            padding: 80px 0;
        }

        .causes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

        .cause-card {
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
            transition: all 0.4s ease;
        }

        .cause-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 50px rgba(0, 0, 0, 0.1);
        }

        .cause-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .cause-card .content {
            padding: 24px 28px 28px;
        }

        .cause-card .content h3 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: #0b1a33;
        }

        .cause-card .content p {
            color: #64748b;
            font-size: 0.95rem;
            margin-bottom: 16px;
        }

        .cause-card .content .btn-small {
            display: inline-block;
            padding: 8px 24px;
            border-radius: 30px;
            background: #0b1a33;
            color: #fff;
            font-weight: 600;
            font-size: 0.85rem;
            transition: all 0.3s ease;
        }

        .cause-card .content .btn-small:hover {
            background: #facc15;
            color: #0b1a33;
        }

        /* ===== ABOUT ===== */
        .about {
            background: #ffffff;
            padding: 80px 0;
        }

        .about-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .about-text h2 {
            font-size: 2.2rem;
            font-weight: 800;
            color: #0b1a33;
            margin-bottom: 16px;
        }

        .about-text h2 span {
            color: #facc15;
        }

        .about-text p {
            color: #475569;
            margin-bottom: 16px;
            line-height: 1.8;
        }

        .about-text ul {
            margin-top: 16px;
        }

        .about-text ul li {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 10px;
            color: #334155;
        }

        .about-text ul li i {
            color: #facc15;
            font-size: 1.1rem;
            width: 24px;
            text-align: center;
        }

        .about-image img {
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
            width: 100%;
            height: auto;
            object-fit: cover;
            max-height: 420px;
        }

        /* ===== GALLERY ===== */
        .gallery {
            background: #f1f5f9;
            padding: 80px 0;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
        }

        .gallery-grid .gallery-item {
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
            transition: all 0.4s ease;
            aspect-ratio: 1/1;
            background: #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: #94a3b8;
        }

        .gallery-grid .gallery-item:hover {
            transform: scale(1.03);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
        }

        .gallery-grid .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .gallery-grid .gallery-item .placeholder-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            font-size: 2.4rem;
            color: #94a3b8;
        }

        .gallery-grid .gallery-item .placeholder-icon span {
            font-size: 0.8rem;
            font-weight: 500;
        }

        /* ===== TESTIMONIALS ===== */
        .testimonials {
            background: #ffffff;
            padding: 80px 0;
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

        .testimonial-card {
            background: #f8fafc;
            border-radius: 20px;
            padding: 30px 28px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
            border-left: 4px solid #facc15;
            transition: all 0.3s ease;
        }

        .testimonial-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
        }

        .testimonial-card .quote {
            font-size: 1rem;
            color: #334155;
            font-style: italic;
            line-height: 1.7;
            margin-bottom: 16px;
        }

        .testimonial-card .author {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .testimonial-card .author .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #0b1a33;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.2rem;
        }

        .testimonial-card .author .info h4 {
            font-weight: 700;
            font-size: 1rem;
            color: #0b1a33;
        }

        .testimonial-card .author .info span {
            font-size: 0.85rem;
            color: #94a3b8;
        }

        /* ===== VOLUNTEER ===== */
        .volunteer {
            background: linear-gradient(135deg, #0b1a33, #1a365d);
            color: #fff;
            padding: 80px 0;
            text-align: center;
        }

        .volunteer h2 {
            font-size: 2.6rem;
            font-weight: 800;
            margin-bottom: 16px;
        }

        .volunteer h2 span {
            color: #facc15;
        }

        .volunteer p {
            font-size: 1.1rem;
            opacity: 0.8;
            max-width: 600px;
            margin: 0 auto 30px;
            line-height: 1.8;
        }

        .volunteer .btn {
            background: #facc15;
            color: #0b1a33;
            font-size: 1.05rem;
            padding: 16px 44px;
        }

        .volunteer .btn:hover {
            background: #fff;
        }

        /* ===== CONTACT ===== */
        .contact {
            background: #f8fafc;
            padding: 80px 0;
        }

        .contact-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
        }

        .contact-info h3 {
            font-size: 1.8rem;
            font-weight: 800;
            color: #0b1a33;
            margin-bottom: 16px;
        }

        .contact-info p {
            color: #475569;
            margin-bottom: 24px;
            line-height: 1.8;
        }

        .contact-info .info-item {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 14px;
            color: #334155;
        }

        .contact-info .info-item i {
            width: 40px;
            height: 40px;
            background: #0b1a33;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 14px 18px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-size: 1rem;
            font-family: 'Inter', sans-serif;
            transition: all 0.3s ease;
            background: #fff;
            margin-bottom: 16px;
        }

        .contact-form input:focus,
        .contact-form textarea:focus {
            border-color: #0b1a33;
            outline: none;
            box-shadow: 0 0 0 4px rgba(11, 26, 51, 0.08);
        }

        .contact-form textarea {
            min-height: 140px;
            resize: vertical;
        }

        .contact-form .btn {
            width: 100%;
            justify-content: center;
        }

        /* ===== FOOTER ===== */
        footer {
            background: #0b1a33;
            color: rgba(255, 255, 255, 0.7);
            padding: 40px 0 24px;
        }

        footer .container {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        footer .footer-top {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 30px;
        }

        footer .footer-brand h3 {
            color: #fff;
            font-weight: 800;
            font-size: 1.4rem;
            margin-bottom: 6px;
        }

        footer .footer-brand h3 span {
            color: #facc15;
        }

        footer .footer-brand p {
            font-size: 0.9rem;
            max-width: 300px;
        }

        footer .footer-links {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
        }

        footer .footer-links .col h4 {
            color: #fff;
            font-weight: 600;
            margin-bottom: 10px;
            font-size: 1rem;
        }

        footer .footer-links .col a {
            display: block;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
            padding: 4px 0;
            transition: color 0.3s ease;
        }

        footer .footer-links .col a:hover {
            color: #facc15;
        }

        footer .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding-top: 20px;
            text-align: center;
            font-size: 0.85rem;
        }

        /* ===== WHATSAPP FLOATING ICON ===== */
        .whatsapp-float {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 999;
            background: #25d366;
            color: #fff;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            box-shadow: 0 6px 30px rgba(37, 211, 102, 0.4);
            transition: all 0.3s ease;
            animation: pulse 2s infinite;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 40px rgba(37, 211, 102, 0.6);
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 992px) {
            .hero .container {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .hero-content p {
                margin-left: auto;
                margin-right: auto;
            }

            .hero-buttons {
                justify-content: center;
            }

            .about-wrap {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .about-text ul li {
                justify-content: center;
            }

            .contact-wrap {
                grid-template-columns: 1fr;
            }

            .logo-wrap img {
                height: 80px;
            }
        }

        @media (max-width: 768px) {
            .hamburger {
                display: flex;
            }

            nav {
                display: none;
                flex-direction: column;
                width: 100%;
                padding: 16px 0 8px;
                gap: 4px;
            }

            nav.open {
                display: flex;
            }

            nav a {
                width: 100%;
                text-align: center;
                padding: 10px 16px;
                font-size: 0.95rem;
            }

            nav a.active::after {
                display: none;
            }

            .logo-wrap img {
                height: 67px;
                /* 45px + 50% = 67.5px → 67px */
            }

            .hero {
                padding: 60px 0 50px;
                min-height: auto;
            }

            .hero-content h1 {
                font-size: 2.2rem;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
            }

            .stats-item .number {
                font-size: 2.4rem;
            }

            .section-title h2 {
                font-size: 1.8rem;
            }

            .causes-grid {
                grid-template-columns: 1fr;
            }

            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .testimonials-grid {
                grid-template-columns: 1fr;
            }

            footer .footer-top {
                flex-direction: column;
                text-align: center;
            }

            footer .footer-brand p {
                margin: 0 auto;
            }

            footer .footer-links {
                justify-content: center;
            }

            .whatsapp-float {
                width: 52px;
                height: 52px;
                font-size: 1.6rem;
                bottom: 20px;
                right: 20px;
            }

            .volunteer h2 {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            .hero-content h1 {
                font-size: 1.8rem;
            }

            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }

            .stats-item .number {
                font-size: 1.8rem;
            }

            .gallery-grid {
                grid-template-columns: 1fr 1fr;
                gap: 12px;
            }

            .container {
                padding: 0 16px;
            }

            .btn {
                padding: 12px 24px;
                font-size: 0.9rem;
            }
        }

        /* ===== UTILITY ===== */
        .text-center {
            text-align: center;
        }
        .mt-20 {
            margin-top: 20px;
        }
        .mb-20 {
            margin-bottom: 20px;
        }
        .gap-8 {
            gap: 8px;
        }
        .flex-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>

    <!-- ===== HEADER ===== -->
    <header>
        <div class="container">
            <div class="logo-wrap">
                <a href="#" onclick="showPage('home'); return false;">
                    <!-- Logo image – replace src with your actual logo.png -->
                    <img src="logo.png" alt="Tanzania Royal Foundation Logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';" />
                    <span style="display:none; color:#fff; font-weight:800; font-size:1.4rem;">TRF</span>
                </a>
                <span class="logo-text" style="color:#fff; font-weight:600; font-size:1rem; display:none;">TRF</span>
            </div>

            <button class="hamburger" id="hamburger" aria-label="Toggle navigation">
                <span></span>
                <span></span>
                <span></span>
            </button>

            <nav id="mainNav">
                <a href="#" class="active" data-page="home">Home</a>
                <a href="#" data-page="about">About Us</a>
                <a href="#" data-page="programs">Programs</a>
                <a href="#" data-page="gallery">Gallery</a>
                <a href="#" data-page="testimonials">Testimonials</a>
                <a href="#" data-page="volunteer">Volunteer</a>
                <a href="#" data-page="contact">Contact</a>
            </nav>
        </div>
    </header>

    <!-- ===== PAGE: HOME ===== -->
    <section class="page-section active" id="page-home">
        <!-- HERO -->
        <div class="hero">
            <div class="container">
                <div class="hero-content animate-on-scroll visible">
                    <h1>You Help People?<br/><span>Become a Volunteer</span></h1>
                    <p>Join Tanzania Royal Foundation in making a difference through education, healthcare, and international partnerships. Your support changes lives.</p>
                    <div class="hero-buttons">
                        <a href="#" class="btn" onclick="showPage('volunteer'); return false;">
                            <i class="fas fa-hand-holding-heart"></i> Become a Volunteer
                        </a>
                        <a href="#" class="btn btn-outline" onclick="showPage('about'); return false;">
                            <i class="fas fa-info-circle"></i> Learn More
                        </a>
                    </div>
                </div>
                <div class="hero-image animate-on-scroll visible">
                    <img src="https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?w=600&h=400&fit=crop&crop=center" alt="Healthcare and community support" />
                </div>
            </div>
        </div>

        <!-- STATS -->
        <div class="stats">
            <div class="container">
                <div class="stats-grid">
                    <div class="stats-item animate-on-scroll">
                        <div class="number"><span>5,240</span></div>
                        <div class="label">Lives Impacted</div>
                    </div>
                    <div class="stats-item animate-on-scroll">
                        <div class="number"><span>2,490</span></div>
                        <div class="label">Volunteer Hours</div>
                    </div>
                    <div class="stats-item animate-on-scroll">
                        <div class="number"><span>250</span></div>
                        <div class="label">Medical Attachments</div>
                    </div>
                    <div class="stats-item animate-on-scroll">
                        <div class="number"><span>7,410</span></div>
                        <div class="label">Community Members</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- RECENT CAUSES / PROGRAMS -->
        <div class="causes">
            <div class="container">
                <div class="section-title animate-on-scroll">
                    <h2>Our <span>Programs</span></h2>
                    <p>Discover how we're making a difference through healthcare collaboration and community development.</p>
                </div>
                <div class="causes-grid">
                    <div class="cause-card animate-on-scroll">
                        <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=600&h=400&fit=crop&crop=center" alt="Medical Attachment Program" />
                        <div class="content">
                            <h3>Medical Attachment Program</h3>
                            <p>Hosting international medical doctors at Sekou Toure Hospital for clinical training and cultural exchange.</p>
                            <a href="#" class="btn-small" onclick="showPage('programs'); return false;">Learn More</a>
                        </div>
                    </div>
                    <div class="cause-card animate-on-scroll">
                        <img src="https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?w=600&h=400&fit=crop&crop=center" alt="Education Support" />
                        <div class="content">
                            <h3>Education &amp; Youth Development</h3>
                            <p>Empowering the next generation through scholarships, mentorship, and international exchange programs.</p>
                            <a href="#" class="btn-small" onclick="showPage('about'); return false;">Learn More</a>
                        </div>
                    </div>
                    <div class="cause-card animate-on-scroll">
                        <img src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?w=600&h=400&fit=crop&crop=center" alt="Cultural Exchange" />
                        <div class="content">
                            <h3>Cultural &amp; Tourism Exchange</h3>
                            <p>Showcasing Tanzania's rich heritage through organized tours to Serengeti and Saanane National Parks.</p>
                            <a href="#" class="btn-small" onclick="showPage('programs'); return false;">Learn More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- CALL TO ACTION: VOLUNTEER -->
        <div class="volunteer">
            <div class="container">
                <div class="animate-on-scroll">
                    <h2>Flexible <span>Solutions</span></h2>
                    <p>Whether you're a medical professional, educator, or passionate volunteer, there's a place for you at Tanzania Royal Foundation.</p>
                    <a href="#" class="btn" onclick="showPage('volunteer'); return false;">
                        <i class="fas fa-user-plus"></i> Become a Volunteer
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== PAGE: ABOUT ===== -->
    <section class="page-section" id="page-about">
        <div class="about">
            <div class="container">
                <div class="section-title animate-on-scroll">
                    <h2>About <span>Us</span></h2>
                    <p>Learn about our mission, vision, and the work we do to create lasting change.</p>
                </div>
                <div class="about-wrap">
                    <div class="about-text animate-on-scroll">
                        <h2>We are <span>Tanzania Royal Foundation</span></h2>
                        <p>
                            Tanzania Royal Foundation is a non-governmental organization dedicated to supporting
                            <strong>education, healthcare collaboration, youth development, and international partnerships</strong>.
                            We create opportunities for international exchange programs that strengthen medical education
                            and cultural cooperation.
                        </p>
                        <p>
                            Through our initiatives, we host medical students and healthcare trainees from around the world
                            at Sekou Toure Regional Referral Hospital, one of Tanzania's major referral and teaching hospitals.
                        </p>
                        <ul>
                            <li><i class="fas fa-check-circle"></i> Education &amp; Youth Empowerment</li>
                            <li><i class="fas fa-check-circle"></i> Healthcare Collaboration</li>
                            <li><i class="fas fa-check-circle"></i> International Partnerships</li>
                            <li><i class="fas fa-check-circle"></i> Cultural Exchange Programs</li>
                        </ul>
                        <p style="margin-top:16px;">
                            We are committed to ensuring efficient coordination and high-quality support services
                            for all participants throughout their attachment period in Tanzania.
                        </p>
                    </div>
                    <div class="about-image animate-on-scroll">
                        <img src="https://images.unsplash.com/photo-1571260899304-425eee4c7efc?w=600&h=500&fit=crop&crop=center" alt="About Tanzania Royal Foundation" />
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== PAGE: PROGRAMS ===== -->
    <section class="page-section" id="page-programs">
        <div class="causes" style="background:#ffffff; padding-top:80px;">
            <div class="container">
                <div class="section-title animate-on-scroll">
                    <h2>Our <span>Programs</span></h2>
                    <p>Detailed information about our flagship Medical Attachment Program at Sekou Toure Hospital.</p>
                </div>

                <div class="about-wrap" style="grid-template-columns:1fr 1fr; gap:50px; margin-top:30px;">
                    <div class="about-text animate-on-scroll">
                        <h2 style="font-size:1.8rem;">Medical Doctors' <span>Attachment Program</span></h2>
                        <p>
                            Tanzania Royal Foundation facilitates international medical doctors' attachment programs
                            at <strong>Sekou Toure Regional Referral Hospital</strong>, a major teaching hospital in Tanzania.
                        </p>
                        <p>
                            The Foundation manages and coordinates all academic and non-academic arrangements to ensure
                            visitors have a safe, comfortable, and productive stay throughout the attachment period.
                        </p>
                        <h4 style="margin-top:20px; color:#0b1a33;">Program Objectives</h4>
                        <ul>
                            <li><i class="fas fa-check-circle"></i> Smooth arrival and settlement of visiting medical doctors</li>
                            <li><i class="fas fa-check-circle"></i> Coordinate accommodation, meals, and daily transport</li>
                            <li><i class="fas fa-check-circle"></i> Reliable transport from accommodation to Sekou Toure Hospital</li>
                            <li><i class="fas fa-check-circle"></i> Organize tourism activities including Serengeti &amp; Saanane parks</li>
                            <li><i class="fas fa-check-circle"></i> Airport transfers upon arrival and departure</li>
                        </ul>
                    </div>
                    <div class="animate-on-scroll" style="background:#f1f5f9; border-radius:20px; padding:30px;">
                        <h3 style="font-size:1.3rem; color:#0b1a33; margin-bottom:16px;">Program Services</h3>
                        <ul style="display:flex; flex-direction:column; gap:12px;">
                            <li style="display:flex; gap:12px; align-items:flex-start; background:#fff; padding:14px 18px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.04);">
                                <i class="fas fa-plane" style="color:#facc15; font-size:1.2rem; margin-top:3px;"></i>
                                <div><strong>Airport Transfers</strong><br/><span style="font-size:0.9rem; color:#64748b;">Pick-up &amp; drop-off in Mwanza</span></div>
                            </li>
                            <li style="display:flex; gap:12px; align-items:flex-start; background:#fff; padding:14px 18px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.04);">
                                <i class="fas fa-bed" style="color:#facc15; font-size:1.2rem; margin-top:3px;"></i>
                                <div><strong>Accommodation</strong><br/><span style="font-size:0.9rem; color:#64748b;">Safe &amp; comfortable housing</span></div>
                            </li>
                            <li style="display:flex; gap:12px; align-items:flex-start; background:#fff; padding:14px 18px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.04);">
                                <i class="fas fa-utensils" style="color:#facc15; font-size:1.2rem; margin-top:3px;"></i>
                                <div><strong>Daily Meals</strong><br/><span style="font-size:0.9rem; color:#64748b;">Breakfast, lunch &amp; dinner</span></div>
                            </li>
                            <li style="display:flex; gap:12px; align-items:flex-start; background:#fff; padding:14px 18px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.04);">
                                <i class="fas fa-car" style="color:#facc15; font-size:1.2rem; margin-top:3px;"></i>
                                <div><strong>Local Transportation</strong><br/><span style="font-size:0.9rem; color:#64748b;">Daily to/from Sekou Toure Hospital</span></div>
                            </li>
                            <li style="display:flex; gap:12px; align-items:flex-start; background:#fff; padding:14px 18px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.04);">
                                <i class="fas fa-tree" style="color:#facc15; font-size:1.2rem; margin-top:3px;"></i>
                                <div><strong>Tourism Experience</strong><br/><span style="font-size:0.9rem; color:#64748b;">Serengeti &amp; Saanane National Parks</span></div>
                            </li>
                            <li style="display:flex; gap:12px; align-items:flex-start; background:#fff; padding:14px 18px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.04);">
                                <i class="fas fa-headset" style="color:#facc15; font-size:1.2rem; margin-top:3px;"></i>
                                <div><strong>Coordination &amp; Support</strong><br/><span style="font-size:0.9rem; color:#64748b;">Local assistance throughout stay</span></div>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Budget Table -->
                <div style="margin-top:50px; background:#f8fafc; border-radius:20px; padding:30px; box-shadow:0 4px 20px rgba(0,0,0,0.04);" class="animate-on-scroll">
                    <h3 style="text-align:center; font-size:1.6rem; color:#0b1a33; margin-bottom:20px;">Proposed <span style="color:#facc15;">Budget Estimate</span></h3>
                    <div style="overflow-x:auto;">
                        <table style="width:100%; border-collapse:collapse; font-size:0.95rem;">
                            <thead>
                                <tr style="background:#0b1a33; color:#fff; border-radius:12px;">
                                    <th style="padding:14px 20px; text-align:left; border-radius:12px 0 0 0;">Item</th>
                                    <th style="padding:14px 20px; text-align:right; border-radius:0 12px 0 0;">Estimated Cost (USD)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="border-bottom:1px solid #e2e8f0;">
                                    <td style="padding:12px 20px;">Airport pick-up (go and return)</td>
                                    <td style="padding:12px 20px; text-align:right; font-weight:600;">200</td>
                                </tr>
                                <tr style="border-bottom:1px solid #e2e8f0;">
                                    <td style="padding:12px 20px;">Accommodation per person per day</td>
                                    <td style="padding:12px 20px; text-align:right; font-weight:600;">100</td>
                                </tr>
                                <tr style="border-bottom:1px solid #e2e8f0;">
                                    <td style="padding:12px 20px;">Meals (breakfast, lunch &amp; dinner) per person</td>
                                    <td style="padding:12px 20px; text-align:right; font-weight:600;">100</td>
                                </tr>
                                <tr style="border-bottom:1px solid #e2e8f0;">
                                    <td style="padding:12px 20px;">Daily transport to Sekou Toure Hospital per person per day</td>
                                    <td style="padding:12px 20px; text-align:right; font-weight:600;">100</td>
                                </tr>
                                <tr style="border-bottom:1px solid #e2e8f0;">
                                    <td style="padding:12px 20px;">Coordination and administrative support (paid once)</td>
                                    <td style="padding:12px 20px; text-align:right; font-weight:600;">50</td>
                                </tr>
                                <tr style="border-bottom:1px solid #e2e8f0;">
                                    <td style="padding:12px 20px;">Serengeti Tour Package per person (transport, 2 days accommodation &amp; meals) <span style="color:#94a3b8; font-size:0.8rem;">Optional</span></td>
                                    <td style="padding:12px 20px; text-align:right; font-weight:600;">1,000</td>
                                </tr>
                                <tr style="border-bottom:1px solid #e2e8f0;">
                                    <td style="padding:12px 20px;">Local communication &amp; emergency support (paid once)</td>
                                    <td style="padding:12px 20px; text-align:right; font-weight:600;">50</td>
                                </tr>
                                <tr style="background:#facc15; color:#0b1a33; font-weight:800;">
                                    <td style="padding:14px 20px; border-radius:0 0 0 12px;">Total Estimated Cost Per Person</td>
                                    <td style="padding:14px 20px; text-align:right; border-radius:0 0 12px 0;">1,600</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <p style="text-align:center; color:#64748b; font-size:0.9rem; margin-top:14px;">
                        <i class="fas fa-info-circle"></i> All costs are estimates and subject to change based on program duration and group size.
                    </p>
                </div>

                <!-- Expected Outcomes -->
                <div style="margin-top:50px; background:#0b1a33; border-radius:20px; padding:40px; color:#fff;" class="animate-on-scroll">
                    <h3 style="font-size:1.6rem; text-align:center; margin-bottom:20px;">Expected <span style="color:#facc15;">Outcomes</span></h3>
                    <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px;">
                        <div style="background:rgba(255,255,255,0.06); border-radius:14px; padding:20px; text-align:center; backdrop-filter:blur(4px);">
                            <i class="fas fa-stethoscope" style="font-size:2.2rem; color:#facc15; margin-bottom:10px; display:block;"></i>
                            <p style="font-size:0.95rem; opacity:0.9;">Successful completion of clinical attachment by visiting doctors</p>
                        </div>
                        <div style="background:rgba(255,255,255,0.06); border-radius:14px; padding:20px; text-align:center; backdrop-filter:blur(4px);">
                            <i class="fas fa-handshake" style="font-size:2.2rem; color:#facc15; margin-bottom:10px; display:block;"></i>
                            <p style="font-size:0.95rem; opacity:0.9;">Strengthened international collaboration &amp; cultural exchange</p>
                        </div>
                        <div style="background:rgba(255,255,255,0.06); border-radius:14px; padding:20px; text-align:center; backdrop-filter:blur(4px);">
                            <i class="fas fa-globe-africa" style="font-size:2.2rem; color:#facc15; margin-bottom:10px; display:block;"></i>
                            <p style="font-size:0.95rem; opacity:0.9;">Positive exposure of Tanzania's healthcare &amp; tourism sectors</p>
                        </div>
                        <div style="background:rgba(255,255,255,0.06); border-radius:14px; padding:20px; text-align:center; backdrop-filter:blur(4px);">
                            <i class="fas fa-users" style="font-size:2.2rem; color:#facc15; margin-bottom:10px; display:block;"></i>
                            <p style="font-size:0.95rem; opacity:0.9;">Enhanced international networking opportunities</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== PAGE: GALLERY ===== -->
    <section class="page-section" id="page-gallery">
        <div class="gallery">
            <div class="container">
                <div class="section-title animate-on-scroll">
                    <h2>Our <span>Gallery</span></h2>
                    <p>Moments from our programs, events, and community impact across Tanzania.</p>
                </div>
                <div class="gallery-grid">
                    <div class="gallery-item animate-on-scroll">
                        <img src="https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?w=400&h=400&fit=crop&crop=center" alt="Gallery 1" />
                    </div>
                    <div class="gallery-item animate-on-scroll">
                        <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=400&h=400&fit=crop&crop=center" alt="Gallery 2" />
                    </div>
                    <div class="gallery-item animate-on-scroll">
                        <img src="https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?w=400&h=400&fit=crop&crop=center" alt="Gallery 3" />
                    </div>
                    <div class="gallery-item animate-on-scroll">
                        <img src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?w=400&h=400&fit=crop&crop=center" alt="Gallery 4" />
                    </div>
                    <div class="gallery-item animate-on-scroll">
                        <img src="https://images.unsplash.com/photo-1571260899304-425eee4c7efc?w=400&h=400&fit=crop&crop=center" alt="Gallery 5" />
                    </div>
                    <div class="gallery-item animate-on-scroll">
                        <img src="https://images.unsplash.com/photo-1586773860418-d37222d8fce3?w=400&h=400&fit=crop&crop=center" alt="Gallery 6" />
                    </div>
                    <div class="gallery-item animate-on-scroll">
                        <img src="https://images.unsplash.com/photo-1520493188986-05fbc5b81e9c?w=400&h=400&fit=crop&crop=center" alt="Gallery 7" />
                    </div>
                    <div class="gallery-item animate-on-scroll">
                        <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=400&h=400&fit=crop&crop=center" alt="Gallery 8" />
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== PAGE: TESTIMONIALS ===== -->
    <section class="page-section" id="page-testimonials">
        <div class="testimonials">
            <div class="container">
                <div class="section-title animate-on-scroll">
                    <h2>What People <span>Say</span></h2>
                    <p>Testimonials from volunteers, medical professionals, and community partners.</p>
                </div>
                <div class="testimonials-grid">
                    <div class="testimonial-card animate-on-scroll">
                        <div class="quote">
                            "The attachment program at Sekou Toure Hospital was a life-changing experience. The support from Tanzania Royal Foundation made everything seamless."
                        </div>
                        <div class="author">
                            <div class="avatar">JD</div>
                            <div class="info">
                                <h4>Dr. James Donovan</h4>
                                <span>Medical Volunteer, USA</span>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card animate-on-scroll">
                        <div class="quote">
                            "I'm grateful for the cultural exchange and the warm welcome we received. The foundation's coordination was exceptional throughout our stay."
                        </div>
                        <div class="author">
                            <div class="avatar">SM</div>
                            <div class="info">
                                <h4>Sarah Mwangi</h4>
                                <span>Healthcare Trainee, Kenya</span>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card animate-on-scroll">
                        <div class="quote">
                            "Tanzania Royal Foundation is truly making a difference. Their commitment to education and healthcare collaboration is inspiring."
                        </div>
                        <div class="author">
                            <div class="avatar">RK</div>
                            <div class="info">
                                <h4>Dr. Richard Kato</h4>
                                <span>Partner, UK</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== PAGE: VOLUNTEER ===== -->
    <section class="page-section" id="page-volunteer">
        <div style="background:#f8fafc; padding:80px 0;">
            <div class="container">
                <div class="section-title animate-on-scroll">
                    <h2>Become a <span>Volunteer</span></h2>
                    <p>Join us in creating lasting change. Your skills and passion can make a real difference.</p>
                </div>
                <div style="max-width:800px; margin:0 auto; background:#fff; border-radius:24px; padding:50px; box-shadow:0 8px 40px rgba(0,0,0,0.06);" class="animate-on-scroll">
                    <h3 style="font-size:1.5rem; color:#0b1a33; margin-bottom:16px; text-align:center;">We Need <span style="color:#facc15;">You</span></h3>
                    <p style="text-align:center; color:#475569; margin-bottom:30px;">
                        Whether you're a medical professional, educator, student, or someone with a heart for service,
                        there's a role for you at Tanzania Royal Foundation.
                    </p>
                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:30px;">
                        <div style="background:#f1f5f9; border-radius:14px; padding:18px; text-align:center;">
                            <i class="fas fa-user-md" style="font-size:1.6rem; color:#facc15; display:block; margin-bottom:6px;"></i>
                            <span style="font-weight:600; font-size:0.95rem;">Medical Volunteers</span>
                        </div>
                        <div style="background:#f1f5f9; border-radius:14px; padding:18px; text-align:center;">
                            <i class="fas fa-chalkboard-teacher" style="font-size:1.6rem; color:#facc15; display:block; margin-bottom:6px;"></i>
                            <span style="font-weight:600; font-size:0.95rem;">Educators</span>
                        </div>
                        <div style="background:#f1f5f9; border-radius:14px; padding:18px; text-align:center;">
                            <i class="fas fa-hands-helping" style="font-size:1.6rem; color:#facc15; display:block; margin-bottom:6px;"></i>
                            <span style="font-weight:600; font-size:0.95rem;">Community Support</span>
                        </div>
                        <div style="background:#f1f5f9; border-radius:14px; padding:18px; text-align:center;">
                            <i class="fas fa-globe" style="font-size:1.6rem; color:#facc15; display:block; margin-bottom:6px;"></i>
                            <span style="font-weight:600; font-size:0.95rem;">International Partners</span>
                        </div>
                    </div>
                    <form style="display:flex; flex-direction:column; gap:14px;" onsubmit="alert('Thank you for your interest! We will contact you soon.'); return false;">
                        <input type="text" placeholder="Your Full Name" required style="padding:14px 18px; border:2px solid #e2e8f0; border-radius:12px; font-size:1rem; font-family:'Inter',sans-serif;" />
                        <input type="email" placeholder="Your Email Address" required style="padding:14px 18px; border:2px solid #e2e8f0; border-radius:12px; font-size:1rem; font-family:'Inter',sans-serif;" />
                        <select required style="padding:14px 18px; border:2px solid #e2e8f0; border-radius:12px; font-size:1rem; font-family:'Inter',sans-serif; background:#fff;">
                            <option value="">I'm interested in...</option>
                            <option value="medical">Medical Attachment Program</option>
                            <option value="education">Education &amp; Youth Development</option>
                            <option value="volunteer">General Volunteering</option>
                            <option value="partnership">Partnership Opportunities</option>
                            <option value="other">Other</option>
                        </select>
                        <textarea placeholder="Tell us about yourself and how you'd like to help..." rows="4" style="padding:14px 18px; border:2px solid #e2e8f0; border-radius:12px; font-size:1rem; font-family:'Inter',sans-serif; resize:vertical;"></textarea>
                        <button type="submit" class="btn" style="justify-content:center; width:100%;">
                            <i class="fas fa-paper-plane"></i> Send Application
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== PAGE: CONTACT ===== -->
    <section class="page-section" id="page-contact">
        <div class="contact">
            <div class="container">
                <div class="section-title animate-on-scroll">
                    <h2>Get in <span>Touch</span></h2>
                    <p>Have questions or want to partner with us? Reach out to our team.</p>
                </div>
                <div class="contact-wrap">
                    <div class="contact-info animate-on-scroll">
                        <h3>Contact <span style="color:#facc15;">Information</span></h3>
                        <p>
                            We'd love to hear from you. Whether you're interested in volunteering, partnership,
                            or learning more about our programs, our team is ready to assist.
                        </p>
                        <div class="info-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>Mwanza, Tanzania</span>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-phone-alt"></i>
                            <span>+255 123 456 789</span>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-envelope"></i>
                            <span>info@tanzaniaroyalfoundation.org</span>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-clock"></i>
                            <span>Mon – Fri: 8:00 AM – 5:00 PM (EAT)</span>
                        </div>
                        <div style="margin-top:24px; display:flex; gap:14px;">
                            <a href="#" style="background:#0b1a33; color:#fff; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease;" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                            <a href="#" style="background:#0b1a33; color:#fff; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease;" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                            <a href="#" style="background:#0b1a33; color:#fff; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease;" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                            <a href="#" style="background:#0b1a33; color:#fff; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease;" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                    <div class="animate-on-scroll">
                        <form class="contact-form" onsubmit="alert('Your message has been sent. We\'ll get back to you soon!'); return false;">
                            <input type="text" placeholder="Your Name" required />
                            <input type="email" placeholder="Your Email" required />
                            <input type="text" placeholder="Subject" />
                            <textarea placeholder="Your Message..." required></textarea>
                            <button type="submit" class="btn">
                                <i class="fas fa-paper-plane"></i> Send Message
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===== FOOTER ===== -->
    <footer>
        <div class="container">
            <div class="footer-top">
                <div class="footer-brand">
                    <h3>Tanzania <span>Royal Foundation</span></h3>
                    <p>Empowering communities through education, healthcare, and international partnerships.</p>
                </div>
                <div class="footer-links">
                    <div class="col">
                        <h4>Quick Links</h4>
                        <a href="#" onclick="showPage('home'); return false;">Home</a>
                        <a href="#" onclick="showPage('about'); return false;">About Us</a>
                        <a href="#" onclick="showPage('programs'); return false;">Programs</a>
                        <a href="#" onclick="showPage('volunteer'); return false;">Volunteer</a>
                    </div>
                    <div class="col">
                        <h4>Programs</h4>
                        <a href="#" onclick="showPage('programs'); return false;">Medical Attachment</a>
                        <a href="#" onclick="showPage('about'); return false;">Education</a>
                        <a href="#" onclick="showPage('programs'); return false;">Cultural Exchange</a>
                    </div>
                    <div class="col">
                        <h4>Support</h4>
                        <a href="#" onclick="showPage('contact'); return false;">Contact Us</a>
                        <a href="#" onclick="showPage('volunteer'); return false;">Become a Volunteer</a>
                        <a href="#" onclick="showPage('gallery'); return false;">Gallery</a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                &copy; 2026 Tanzania Royal Foundation. All rights reserved.
            </div>
        </div>
    </footer>

    <!-- ===== WHATSAPP FLOATING ICON ===== -->
    <a href="https://wa.me/255123456789?text=Hello%20Tanzania%20Royal%20Foundation%2C%20I%27d%20like%20to%20know%20more%20about%20your%20programs." target="_blank" class="whatsapp-float" aria-label="Chat on WhatsApp">
        <i class="fab fa-whatsapp"></i>
    </a>

    <!-- ===== JAVASCRIPT ===== -->
    <script>
        // ---- Page Navigation ----
        function showPage(pageId) {
            // Hide all pages
            document.querySelectorAll('.page-section').forEach(function(el) {
                el.classList.remove('active');
            });

            // Show target page
            var target = document.getElementById('page-' + pageId);
            if (target) {
                target.classList.add('active');
                // Trigger scroll animations
                setTimeout(function() {
                    target.querySelectorAll('.animate-on-scroll').forEach(function(el) {
                        el.classList.add('visible');
                    });
                }, 100);
            }

            // Update nav active state
            document.querySelectorAll('nav a').forEach(function(link) {
                link.classList.remove('active');
                if (link.getAttribute('data-page') === pageId) {
                    link.classList.add('active');
                }
            });

            // Close mobile menu
            document.getElementById('mainNav').classList.remove('open');
            document.getElementById('hamburger').classList.remove('active');

            // Scroll to top
            window.scrollTo({ top: 0, behavior: 'smooth' });

            return false;
        }

        // ---- Hamburger Toggle ----
        document.getElementById('hamburger').addEventListener('click', function() {
            this.classList.toggle('active');
            document.getElementById('mainNav').classList.toggle('open');
        });

        // ---- Nav link clicks ----
        document.querySelectorAll('nav a').forEach(function(link) {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                var page = this.getAttribute('data-page');
                if (page) {
                    showPage(page);
                }
            });
        });

        // ---- Scroll Animation (Intersection Observer) ----
        document.addEventListener('DOMContentLoaded', function() {
            var observer = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    }
                });
            }, {
                threshold: 0.15,
                rootMargin: '0px 0px -20px 0px'
            });

            document.querySelectorAll('.animate-on-scroll').forEach(function(el) {
                observer.observe(el);
            });

            // If any .animate-on-scroll is already visible on load (hero, etc.)
            document.querySelectorAll('.animate-on-scroll').forEach(function(el) {
                var rect = el.getBoundingClientRect();
                if (rect.top < window.innerHeight * 0.85) {
                    el.classList.add('visible');
                }
            });
        });

        // ---- Handle logo fallback if logo.png not found ----
        // The logo image has an onerror handler that hides it and shows the fallback span.
        // We also want to ensure the logo link works.
        document.querySelector('.logo-wrap a')?.addEventListener('click', function(e) {
            e.preventDefault();
            showPage('home');
        });

        // ---- Ensure Home is active on load ----
        document.addEventListener('DOMContentLoaded', function() {
            // Set home as active if no hash
            if (!window.location.hash) {
                showPage('home');
            }
        });

        // ---- Handle hash-based navigation ----
        window.addEventListener('hashchange', function() {
            var hash = window.location.hash.replace('#', '');
            if (hash) {
                var pageMap = {
                    'home': 'home',
                    'about': 'about',
                    'programs': 'programs',
                    'gallery': 'gallery',
                    'testimonials': 'testimonials',
                    'volunteer': 'volunteer',
                    'contact': 'contact'
                };
                var page = pageMap[hash] || 'home';
                showPage(page);
            }
        });

        // If there's a hash on load, handle it
        if (window.location.hash) {
            var hash = window.location.hash.replace('#', '');
            var pageMap = {
                'home': 'home',
                'about': 'about',
                'programs': 'programs',
                'gallery': 'gallery',
                'testimonials': 'testimonials',
                'volunteer': 'volunteer',
                'contact': 'contact'
            };
            var page = pageMap[hash] || 'home';
            showPage(page);
        }

        console.log('Tanzania Royal Foundation website loaded successfully!');
        console.log('Logo size: 90px desktop, 67px mobile (50% larger)');
    </script>

</body>
</html>